<!-- FriendList.vue -->
<template>
  <view>
    <view class="main">
      <view v-for="friend in friendList" :key="friend.id" class="friend-list">
        <view @click="goToFriendDetail(friend)">
          <image :src="friend.headImage"></image>
        </view>
        <view @click="goToFriendDetail(friend)">
          <text class="nickname">{{ friend.nickName }}</text>
        </view>
        <view @click="goPrivateChat(friend)">
          <image src="../../static/images/chat/chat.png"></image>
        </view>
      </view>
    </view>

    <view v-for="qun in qunList" :key="qun.groupId" class="friend-list">
      <view @click="goToFriendDetail(qun)">
        <image :src="qun.headImage"></image>
      </view>
      <view @click="goToFriendDetail(qun)">
        <text class="nickname">{{ qun.groupName }}</text>
      </view>
      <view @click="goPrivateChat(qun)">
        <image src="../../static/images/chat/chat.png"></image>
      </view>
    </view>

  </view>


</template>

<script>
import {
  getAllUser, getGroupUser
} from "@/api/chat/user";

export default {
  data() {
    return {
      friendList: [],
      qunList: [],

    };
  },
  async onLoad() {
    let friendList = await getAllUser(1, 1)
    this.friendList = friendList.data
    console.info(this.friendList)
    let qunList = await getGroupUser(1)
    this.qunList = qunList.data
    console.info(this.qunList)
  },
  methods: {
    goToFriendDetail(friend) {
      // 处理好友详情页面跳转逻辑
      console.info(friend)
    },
    goPrivateChat(friend) {
      //跳转到私聊
      let path =
          './privateChat?to=' + friend.id;
      uni.navigateTo({
        url: path
      });
    }
  },
};
</script>

<style>
.main {
}

.friend-list {
  position: relative;
  background-color: white;
  box-shadow: #b7b7b7 0px 0px 1px;
}

.friend-list > view {
  display: inline-block;
  position: relative;
  height: 130rpx;
  width: 130rpx;
  line-height:130rpx;
  padding: 20rpx;
}

.friend-list image {
  width: 100%;
  height: 100%;
  border-radius: 50%;
}

.friend-list view:nth-child(3) {
  height: 100rpx;
  width: 100rpx;
  position: absolute;
  right: 20rpx;
  top: 17rpx;
}

.friend-list text {
  position: absolute;
  font-size: 70rpx;
  color: rgb(106 106 106 / 90%);
}
</style>



